<!--
 * @Author: your name
 * @Date: 2022-03-25 14:21:46
 * @LastEditTime: 2022-03-25 14:33:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \学习笔记\css\pseudo\host.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    html {
      font-family: sans-serif;
      background-color: #a60000;
    }

    body {
      margin: 0 auto;
      width: 80%;
      max-width: 800px;
    }

    header,
    article,
    aside,
    footer {
      background-color: white;
      padding: 20px;
      margin: 20px 0;
    }

    header,
    footer {
      background-color: #ddd;
    }

    li,
    p {
      font-size: 1.1rem;
      line-height: 1.5;
    }
  </style>
  <body>
    <header>
      <h1>
        Host selectors <a href="#"><context-span>example</context-span></a>

        <context-span>马志强</context-span>
        <span>马志强</span>
        <h1>马志强</h1>
      </h1>
    </header>
    <main>
      <article>
        <h2>This is my first article.</h2>
        <p>
          This article is rather lovely and exciting — it is all about animals,
          including <a href="#"><context-span>Beavers</context-span></a
          >, <a href="#"><context-span>Bears</context-span></a
          >, and <a href="#"><context-span>Wolves</context-span></a
          >. I love animals and I'm sure you will too; please let us know what
          your favorite animals are. Woo hoo!
        </p>
      </article>

      <article>
        <h2>This is my second article.</h2>
        <p>
          This article is also quite exciting — it is all about colors,
          including <a href="#"><context-span>Red</context-span></a
          >, <a href="#"><context-span>Blue</context-span></a
          >, and <a href="#"><context-span>Pink</context-span></a
          >. A true joy indeed — funky exciting colors make the world go round.
          No more gray days for us.
        </p>
      </article>
      <aside>
        <h2>Some links about web components</h2>
        <ul>
          <li>
            <a href="#"><context-span>Custom elements</context-span></a>
          </li>
          <li>
            <a href="#"><context-span>Shadow DOM</context-span></a>
          </li>
          <li>
            <a href="#"><context-span>Templates and slots</context-span></a>
          </li>
        </ul>
      </aside>
    </main>
    <footer>
      <p>
        Copyright nobody; example written by
        <a href="#"><context-span class="footer">马志强</context-span></a>
      </p>
    </footer>
  </body>
  <script>
    class ContextSpan extends HTMLElement {
      constructor() {
        super();
        const style = document.createElement("style");
        const span = document.createElement("span");
        span.textContent = this.textContent;

        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.appendChild(style);
        shadowRoot.appendChild(span);

        style.textContent = `
        span:hover { text-decoration: underline; }
        :host-context(h1) { font-style: italic;font-size: 10px;color: pink }
        :host(h1) { font-size: 40px;color: pink; }
        :host-context(h1):after { content: " - no links in headers!" }
        :host-context(article, aside) { color: gray; }
        :host-context(.footer) { color : yellow; }
        :host { background: rgba(0,0,0,0.1); padding: 20px 5px; }
        :host(.footer) {color: pink }
      `;
      }
    }

    // Define the new element
    customElements.define("context-span", ContextSpan);
  </script>
</html>
